<template>
  <div id="app">
    <div id="pag-wrap" @scroll="pagWrapScroll" ref="pag" @touchstart="pagWrapStart"
         @touchmove="pagWrapMove">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      <div ref="inviteListFooter" style="transform: translateY(-1px)"></div>
    </div>
    <div id="menu" @touchmove.prevent>
      <div class="m-ico user-ico" :class="{choose: tabIndex==1}" @click="chooseTab(1)">
        <img :src="routerChoose" alt="">
        <img :src="routerIco" alt="">
        路由器
      </div>
      <div class="m-ico in-out-ico" :class="{choose: tabIndex==2}" @click="chooseTab(2)">
        <img :src="pcChoose" alt="">
        <img :src="pcIco" alt="">
        Linux
      </div>
      <div class="m-ico pledge-ico" :class="{choose: tabIndex==3}" @click="chooseTab(3)">
        <img :src="linuxChoose" alt="">
        <img :src="linuxIco" alt="">
        客户端
      </div>
    </div>
    <div class="backtop" v-show="backTopShow" @click.stop="toBackTop">
      <img src="~assets/images/miningboard/back-top.png" alt="" >
    </div>
    <cube-popup type="my-popup" ref="myPopup">
      <div class="graphic">
        <div class="graphic-img-wrap">
          <cube-scroll ref="graphicScroll">
            <img :src="graphic" alt="" @load="refreshGraphic">
          </cube-scroll>
        </div>
        <p @click="closeGraphic">我已了解</p>
      </div>
    </cube-popup>
  </div>
</template>

<script>
  import {getHashString} from 'common/js/utl'

    export default {
        data() {
            return {
                isCanMoveUpPage: true,
                backTopShow: false,
                graphic: '',
                tabIndex: 1,
                routerIco: require('assets/images/mining/router.png'),
                routerChoose: require('assets/images/mining/router-highlight.png'),
                pcIco: require('assets/images/mining/pc.png'),
                pcChoose: require('assets/images/mining/pc-highlight.png'),
                linuxIco: require('assets/images/mining/linux.png'),
                linuxChoose: require('assets/images/mining/linux-highlight.png'),
            }
        },
        created(){
            let index = getHashString('index')
            if(index){
                this.tabIndex = +index
            }

        },
        mounted(){
            this.pagWrap = window['pag-wrap']
            if(typeof IntersectionObserver == 'function'){
                var io = new IntersectionObserver(this.pageScrollHandle2)
                io.observe(this.$refs.inviteListFooter);
                this.startDt = Date.now()
            }else{
                this.$refs.pag.addEventListener('scroll', this.pageScrollHandle.bind(this))
            }
            // setTimeout(()=>{
            //
            // }, 1000)
        },
        methods: {
            pagWrapMove(e){
                let {isCanMoveUpPage, pageStartY} = this
              if(!isCanMoveUpPage){
                  //console.log(this.isCanMoveUpPage)
                  // if(pagWrap.scrollHeight > 0 && pagWrap.scrollTop == 0){
                  //     this.isCanMoveUpPage = true
                  //     return
                  // }
                  if(pageStartY - e.touches[0].pageY > 0){
                      e.preventDefault()
                  }
              }
            },
            pagWrapStart(e){
                this.pageStartY = e.touches[0].pageY;
            },
            pageScrollHandle(e){
                let {target} = e
                // console.log(e.target.scrollTop)
                // console.log(e.target.scrollHeight)
                if(e.target.scrollHeight - e.target.scrollTop <= window.innerHeight){
                    this.$eventBus.$emit('onPullup', this.tabIndex)
                    this.isCanMoveUpPage = false
                }else{
                    this.isCanMoveUpPage = true
                }
            },
            pageScrollHandle2(entries){
                let en = entries[0]
                let sdt = Date.now()
                let isClient = en.intersectionRatio > 0
                //console.log('isClient: ' + isClient)
                if(isClient){
                  this.isCanMoveUpPage = false
                }else{
                    this.isCanMoveUpPage = true
                }
                if((sdt - this.startDt) < 1000){
                    return
                }
                this.startDt = sdt
                if(isClient){
                    // console.log('=====================')
                    // console.log(en.time)
                    this.$eventBus.$emit('onPullup', this.tabIndex)
                }
            },
            toBackTop(){
                this.pagWrap.scrollTop = 0
            },
            pagWrapScroll(){
                let {pagWrap} = this
              if(pagWrap.scrollTop > 260){
                this.backTopShow = true
              }else{
                  this.backTopShow = false
              }
            },
            refreshGraphic(){
                setTimeout(()=>{
                    this.$refs.graphicScroll.refresh()
                }, 40)
            },
            showGraphic(url){
                this.graphic = url
                this.$refs.myPopup.show()
            },
            closeGraphic(){
                this.$refs.myPopup.hide()
            },
            chooseTab(index){
                let {uid, appToken: token} = window
                this.tabIndex = index
                let url
                switch (index) {
                    case 1:
                        url = '/'
                        break;
                    case 2:
                        url = '/linux'
                        break;
                    case 3:
                        url = '/pc'
                        break;
                        break;
                }
                this.$router.replace({path: url, query: {index,
                    uid, token
                    }});
            }
        }
    }
</script>

<style lang="scss">
@import 'common/scss/index.scss';
@import "~common/scss/mixin";

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.backtop {
  position: fixed;
  right: 10px;
  bottom: 120px;
  z-index: 500;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 46px;
    height: 46px;
    display: block;
  }
}

 #pag-wrap {
   height: calc(100% - 98px);
   //height: 100%;
   background: #F5F5FB;
   overflow-y: auto;
 }

  #menu {
    position: relative;
    //position: sticky;
    //position: -webkit-sticky;
    //bottom: 0;
    z-index: 10;
    height:98px;
    background:rgba(255,255,255,1);
    box-shadow:0px -1px 8px 0px rgba(10,29,87,0.2);
    display: flex;
    padding: 0 50px;
    align-items: center;
    justify-content: space-between;
    font-size:20px;
    font-weight:600;
    color:#DADDEA;
  }


  .m-ico {
    text-align: center;
    position: relative;
    &.choose {
      color: #173E8F;
      img {
        &:first-of-type {
          display: block;
        }
        &:last-of-type {
          display: none;
        }
      }
    }
    img {
      display: none;
      width: 46px;
      height: 46px;
      margin: 0 auto 9px auto;
      &:last-of-type {
        display: block;
      }
    }
  }


  div[xdw], p[xdw] {
    &:before{
      content: attr(xdw);
    }
  }


  .graphic {
    background: #fff;
    //padding: 32px 16px 0 16px;
    margin: 97px 30px;
    //height: 1140px;
    height: calc(85vh - 194px);
    img {
      display: block;
      width: 657px;
      height: auto;
      margin-bottom: 20px;
      //min-height: 952px;
    }
    p {
      border-top: 2px solid #F5F5FB;
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2B75F3;
      font-size: 34px;
    }
  }

  .graphic-img-wrap {
    height: calc(100% - 88px);
    //margin-bottom: 66px;
    padding: 32px 16px 0 16px;
  }


</style>
<style lang="scss">

  .cube-popup {
    z-index: 100;
  }

  .b-title {
    padding: 24px 30px;
    display: flex;
    align-items: center;
    img {
      width: 174px;
      height: 174px;
      margin-right: 24px;
    }
    > div {
      > div {
        width:160px;
        height:56px;
        border:2px solid rgba(255,255,255,1);
        border-radius:28px;
        font-size:26px;
        color:rgba(255,255,255,1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size:40px;
        font-weight:600;
        color:rgba(255,255,255,1);
        margin-bottom: 32px;
      }
    }
  }

  .data-board {
    width:690px;
    height:372px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -136px 30px 24px 30px;
  }

  .data-head {
    padding: 40px 0;
    display: flex;
    align-items: center;
    > div {
      flex: 1;
      text-align: center;
      > p {
        font-size:24px;
        color:rgba(113,118,140,1);
        margin-bottom: 24px;
      }
      > div {
        font-size:40px;
        font-weight:600;
        color:rgba(32,44,91,1);
        overflow: hidden;
        &.unmatched{
          color:#DC0630;
          span{
            font-size:20px;
          }
        }
      }
    }
  }

  .s-split {
    width:2px;
    height:90px;
    background:rgba(245,245,245,1);
  }

  .node-list {
    margin-bottom: 40px;
  }

  .data-body {

  }

  .data-row {
    height: 100px;
    border-top: 2px solid #F5F5F5;
    display: flex;
  }

  .data-cell {
    flex: 1;
    border-right: 2px solid #F5F5F5;
    padding: 19px 0 0 23px;
    &:last-of-type {
      border: none;
    }
    p {
      font-size:24px;
      color:rgba(113,118,140,1);
      margin-bottom: 14px;
    }
    div {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
    }
  }

  .node-head {
    background: #fff;
    padding: 24px 30px;
    h3 {
      font-size:36px;
      font-weight:600;
      color:rgba(32,44,91,1);
      margin-bottom: 19px;
      display: flex;
      align-items: center;
      img {
        margin-left: 17px;
        width: 36px;
        height: 36px;
      }
      &::before {
        content: '';
        width:6px;
        height:36px;
        background:rgba(43,117,243,1);
        display: inline-block;
        margin-right: 16px;
      }
    }
    p {
      font-size:20px;
      color:rgba(113,118,140,1);
      line-height:33px;
    }
  }

  .node-body {
    color:rgba(32,44,91,1);
    font-size: 26px;
  }

  .tb-head {
    border-top: 2px solid #F5F5F5;
    height: 72px;
    font-size:24px;
    display: flex;
    line-height: 30px;
    padding-top: 8px;
    background: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: -1px;
  }

  .tb-row {
    background: #fff;
    height: 106px;
    display: flex;
    margin-top: 8px;
  }

  .tb-cell {

    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-of-type(1) {
      width: 12%;
    }
    &:nth-of-type(2) {
      width: 25%;
      p {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 170px;
        line-height: 1.2;
      }
    }
    &:nth-of-type(3) {
      width: 20%;
    }
    &:nth-of-type(4) {
      width: 30%;
    }
    &:nth-of-type(5) {
      width: 13%;
      span {
        font-weight: 600;
      }
    }
  }

  .tb-body {

  }


  .tag {
    width:76px;
    height:30px;
    border-radius:4px;
    font-size:20px;
    font-weight:500;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    &.warning {
      background:rgba(247,163,16,1);
    }
    &.success {
      background:#10D592;
    }
    &.danger {
      background:#EB3257;
    }
    &.info {
      background:#697a9b;
    }
  }


div{
  &.no {
    color: #EB3257;
  }
  &.ok {
    color: #10D592;
  }
}

  .list-loading {
    position: fixed;
    bottom: 108px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    &::after{
      content: '加载中..';
      display: inline;
      //color: #fff;
      margin-left: 5px;
      font-size: 22px;
    }
    &.hide {
      display: none;
    }
  }


  .no-result-wrapper{
    z-index: 5;
    position:absolute;
    width:92vw;
    top: 222px;
    //margin: -136px auto 0;
    left: 50%;
    transform: translateX(-50%);
    height: 80vh;
    box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
    border-radius:14px 14px 0 0;
    background:#fff;
    .no-result{
      width:350px;
      margin:0 auto;
      padding-top:218px;
      text-align:center;
      img{
        display:block;
        width:250px;
        height:274px;
        margin:0 auto;
      }
      h3{
        padding-top:88px;
        font-size:36px;
        font-weight:600;
        color:#71768C;
        text-align:center;
      }
    }
  }



</style>
